<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>材料销量数量统计</title>
</head>
<body>
<!--查询条件框-->
<form class="layui-form" action="" style="padding-top: 20px;" id="msmConForm">
</form>

<!--按钮框-->
<div class="layui-row">
    <div class="layui-col-xs12" id="msmBtnForm" style="margin-left: 40px;margin-bottom: 15px;">
    </div>
</div>

<!--列表-->
<!--<table class="layui-hide" id="msmTable"></table>-->

<!--列表-->
<div class="layui-tab" lay-filter="msmTab">
    <ul class="layui-tab-title">
        <li class="layui-this">列表</li>
        <li>大区销售饼状图</li>
        <li>品类销售饼状图</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="msmTable"></table>
        </div>
        <div class="layui-tab-item">
            <div id="dqRptDiv" style="width: 100%;height: 800px;">
            </div>
        </div>
        <div class="layui-tab-item">
            <div id="plRptDiv" style="width: 100%;height: 800px;">
            </div>
        </div>
    </div>
</div>


<!-- 你的 HTML 代码 -->
<script>
    layui.use(['http', 'shopx', 'form', 'pub', 'table'], function () {
        var http = layui.http
            , shopx = layui.shopx
            , form = layui.form
            , pub = layui.pub
            , table = layui.table
            , $ = layui.$;

        var prefix = "msm";
        var elements = {
            name: prefix,
            controlName: 'materialSale',
            //页面元素前缀，按配置，施工等模块定义
            prefix: 'cm6',
            //page标题
            title: "材料销量数量统计",
            //查询列表接口
            qryUrl: '/cmSaleDetail/getSalesByMaterial',
            //查询条件
            conName: 'msmConForm',
            //按钮
            btnName: 'msmBtnForm',
            //表格id
            tableName: 'msmTable',
            //表主键
            keyId: '',
            //排序
            orderBy: "",
            //默认初始化查询条件
            addModel: {
                // dictCode:"DEDUCTION_FLAG"
            },
            //查询条件 label#id#类型
            //注意：如果类型是dict 则用:分割 [0]是id [1]是dictCode,[2]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            //注意：如果类型是sel 则用:分割 [0]是id [1]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            conArray: [
                "开始时间|billBegDate:billEndDate:d2|RDT",
                "供货商|supplyName|TEXT",
                "转换供货商|supplyNewName|TEXT",
                "组织机构|orgCode:t2|SEL",
                "材料分类|materialClassName|TEXT",
                "材料名称|materialName|TEXT"
            ],
            //按钮 id#名称#类型#图标#是否权限控制
            btnArray: [
                prefix + 'QueryBtn|查询|primary|&#xe615;|N'
            ],

            //表格列
            cols: [[
                , {field: 'regionName', title: '大区', fixed: 'left'}
                , {field: 'orgName', title: '公司名称', fixed: 'left'}
                , {field: 'materialClassName', title: '材料分类', fixed: 'left'}
                , {field: 'supplyName', title: '供货商', fixed: 'left'}
                , {field: 'supplyNewName', title: '转换供货商', fixed: 'left'}
                , {field: 'materialName', title: '材料名称', fixed: 'left'}
                , {field: 'stock_num', title: '销量', fixed: 'left',  sort: true}
            ]]
        }
        var page = shopx.genPage(elements);
        //展示菜单
        shopx.genCond(page);
        //展示按钮
        shopx.genBtn(page);
        //展示有权限的按钮
        shopx.eleAuthShow(http.getUserFunc());
        http.initPage(page);
        //2、部门渲染
        http.qryOrgList({}, "q_cm6_orgCode");
        layui.element.on('tab(msmTab)', function(data){
            showEchart(data.index);
        });

    });

    function showEchart(type){
        var qryModel = layui.pub.getFormObject('msmConForm', 'q_cm6_');
        qryModel['groupType'] = type;
        layui.http.postRequest("/cmSaleDetail/querySalesByGroupList", 'POST', qryModel, function suc(data) {
            var divName= "";
            if(type=="1"){
                divName = "dqRptDiv";
            }else  if(type=="2"){
                divName = "plRptDiv";
            }
            var chartDom = document.getElementById(divName);
            var myChart = echarts.getInstanceByDom(chartDom);
            if (myChart) {
                myChart.dispose();
            }
            myChart = echarts.init(chartDom);
            // var myChart = echarts.init(document.getElementById(divName));
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',
                        data: data.rspData,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
            myChart.resize();
        }, null, false, false);
    }

</script>
</body>
</html>